/*general format*/
main{
    margin: 2em 5em;
    padding: 2em 2em;
    background-color: aliceblue;
	opacity: .95;
    height: 100%;

}

h4{
	justify-self: center;
	font-size: 1.5em;
}

h5{
	margin: 0;
	font-size: 1.2em;
}
div{
	margin:.5em;
}

ul{
	list-style-type: none;
}
main img{
	width: 25em;
	justify-items: center;
	border: 1px solid #193F80;
	
}
/*stats format*/
.stats{
	display: grid;
	grid-gap: .5rem;
	grid-template-columns: 1fr 1fr 1fr;
	margin: 1em;
	
}
.proficiency-bonus,
.passive-wisdom,
.armor-class, .initiative, .speed{
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: center;
		border: 1pt solid black;
		border-radius: 10pt;
		background: #D5EEFF;
}
.number
	{
	display: block;
	width: 100%;
	height: 100%;

	font-size: 15pt;
	text-align: center;
	text-justify: center;
	border: 1pt solid black;
	border-bottom: 1px solid black !important;
	margin-top: -1pt;
	margin-bottom: -1pt;
	margin-left: -1pt;
	border-radius: 10pt;
}

.label{
		text-align: center;
}

.modifier{
		display: grid;
		grid-template-columns: .5fr 1fr;
		align-items: left;
		border: 1pt solid black;
		border-radius: 10pt;
		background: #D5EEFF;
}
/*check box style*/
input[type="checkbox"]{
	-webkit-appearance: none;
	appearance:none;
	background-color: aliceblue;
	font: inherit;
	color: currentColor;
	width: 1.15em;
	height: 1.15em;
	border: 0.09em solid currentColor;
	border-radius: 0.15em;
	transform: translateY(-0.075em);
	display: grid;
	place-content: center;
}
input[type="checkbox"]::before {
	content: "";
	width: 0.65em;
	height: 0.65em;
	transform: scale(0);
	transition: 120ms transform ease-in-out;
	  
}
input[type="checkbox"]:checked::before {
	transform: scale(1);
	background-color:#FFA500;
}
/*skills format*/
.skills{
	display: grid;
	grid-gap: .5em;
	grid-template-columns: 1fr 1fr 1fr;
	text-justify: left;
	
}

.prof-and-lang{
	display: grid;
	grid-template-columns: 1fr 1fr;
	
}

.prof, .lang, .weapon, .feature, .spells{
		
		border: thin solid black;
		border-radius: 5pt;
		text-justify: left;
		padding: .1em .5em;
		margin: .5em;
}


.attacks-and-spells{
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.spell1, .spell2,.guide-bolt, .wildshape{
		display: flex;
		justify-content: center;
		border: 1pt solid black;
		border-radius: 10pt;
		background: #D5EEFF;
		margin: .5em;
}

@media (min-width: 50rem){
	.skills{
		grid-template-columns: repeat(6, 1fr);
	}

}